<template>
  <div>
    <!-- <div class="lesson">
      <lesson v-for="item in db" :key="item.id" :lesson="item" @click="del(item)" class="hd" />
    </div> -->

    <div class="lesson">
      <!-- <lesson v-for="item in db" :key="item.id" :lesson="item" @del="del(item)"/> -->
      <!-- <lesson v-for="item in db" v-model="item.title" v-model:price="item.price" :key="item.id" :lesson="item" @del="del(item.id)"/> -->
      <!-- v-model可以自定义修饰符 -->
      <lesson v-for="item in db" v-model:title.toupper.substr_8="item.title" v-model:price="item.price" :key="item.id" :lesson="item" @del="del(item.id)"/>
    </div>

    <div class="title">自定义实现v-model</div>
    <input type="text" :value="title" @input="title = $event.target.value" >{{title}}

    <hr>

    <div class="title">vue3实现v-model</div>
    <!-- 完整写法 -->
    <!-- <hdInput :value="title" @update:value="fatherChange" /> -->
    <!-- 语法糖 -->
    <!-- <hdInput v-model:value="title" /> -->
    <!-- 简写（如果value改名为modelValue，可以省略成v-model） -->
    <hdInput v-model="title" />
    {{title}}
  </div>
</template>

<script>
  import db from "../data/db.js"
  import lesson from "./components/Lesson.vue"
  import hdInput from "./components/HdInput.vue"
  export default {
    components:{lesson,hdInput},
    data() {
      return {
        db,
        title : "后盾人"
        }
    },
    methods:{
      // del(item){  //将事件传递到子组件上删除
      //   const idx = this.db.findIndex( l => l.id == item.id );
      //   this.db.splice(idx, 1);
      // }
      del(id){  //将事件传递到子组件上删除
        const idx = this.db.findIndex( l => l.id == id );
        this.db.splice(idx, 1);
      },
      fatherChange(v){
        this.title = v;
      }
    }
  }
</script>

<style lang="scss" scoped>
.lesson{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  column-gap: 10px;
}

.title{
  font-weight: bold;
}
</style>
